// searchType
// 搜索类型页
import { Search, Cell, Image, PullRefresh, List } from 'react-vant';
import styles from './fBSearchType.module.css'
import { useNavigate } from 'react-router-dom';
import { zzy_getType } from "../request/api";
import { ErrorBlock } from 'antd-mobile'
import img1 from '../assets/loading.jpg'
import { debounce } from 'lodash'
import { useState, useMemo } from 'react';
export default function FBSearchType() {
    const navigate = useNavigate()
    const onRefresh = () => {
        return new Promise(resolve => {
            setTimeout(() => {
                setPage(1)
                setList([])
                setFinished(false)
                resolve(true)
            }, 500)
        }
        )
    }
    const getData = async (value, page, limit) => {
        let res = await zzy_getType({ typeName: value, page, limit })
        return res.data.data
    }
    const onLoadRefresh = async () => {
        setFlag(true)
        const data = await getData(value, page, limit)
        setList(pre => {
            return [...pre, ...data]
        })
        if (data.length <= 0) {
            setFinished(true)
            if (list.length > 0) {
                setText('已经一点都没有了w(ﾟДﾟ)w')
            } else {
                setText('')
            }
        }

        setPage(pre => pre + 1)

    }
    const handleChange = useMemo(() => {
        return debounce((value) => {
            setList([])
            setValue(value)
            setPage(1)
            setFinished(false)
        }, 1000)
    }, [])
    const [page, setPage] = useState(1)
    const [limit] = useState(4)
    const [value, setValue] = useState('')
    const [list, setList] = useState([])
    const [flag, setFlag] = useState(false)
    const [text, setText] = useState('')
    const [finished, setFinished] = useState(true)
    return <>
        <PullRefresh
            style={{ height: '100vh' }}
            headHeight={80}
            pullingText={({ distance }) => (
                <img
                    className={styles.doge}
                    src="https://img.yzcdn.cn/vant/doge.png"
                    style={{ transform: `scale(${distance / 80})` }}
                />
            )}
            loosingText={() => <img className={styles.doge} src="https://img.yzcdn.cn/vant/doge.png" />}
            loadingText={() => <img className={styles.doge} src={img1} />}
            onRefresh={onRefresh}
        >
            <Search
                autoFocus
                value={value}
                onChange={(value) => {
                    handleChange(value)
                }}
                shape='round'
                placeholder="搜索你想要发布商品的游戏"
                onCancel={() => {
                    setValue('');
                }}
                onClear={() => {
                    setValue('');
                }}
            />

            <List finished={finished} onLoad={onLoadRefresh} finishedText={text} loadingText='全速加载中'>
                {list.length == 0 && flag && finished ? <ErrorBlock status='empty' />
                    : (list.map((item) => {
                        return <Cell center key={item._id} title={item.typeName} isLink icon={<Image src={item.imgSrc} width={24}></Image>} onClick={() => navigate('/fBType', { state: { item: item } })} />
                    }))
                }

            </List>

        </PullRefresh>

    </>
}
